<!-- 产品列表用户选择 -->
<template>
    <div style="height: calc(100vh - 45px);">
      <div style="display: flex;flex-wrap: wrap;overflow-y: auto;max-height: 85%;">    
        <div v-for="(item,idx) in items" :key="idx" @click="selectHandle(item)"
          :style="{padding:'5px',backgroundColor:item.id == selectItem.id?'#409EFF':'#f7f7f7',marginBottom:'12px',marginRight:'12px',display:'flex',flexDirection:'column',alignItems:'center',}"
          >
            <el-image :src="item.productImg" fit="fill" :lazy="true" style="width: 100px;height: 100px;"></el-image>
            <div style="padding: 5px 0;">{{ item.productName }}</div>
        </div>
      
      </div>


      <div style="padding: 12px;display: flex;justify-content: center;">
        <el-button type="primary" size="small" @click="nextHandle" style="width: 10%;">下一步</el-button>
      </div>
    </div>
  </template>
  
  <script>
    import ServiceApi from '@/views/service/api'
  export default {
    components: {
    },
    data() {
      return {
        selectItem:{id:undefined},
        items:[],
      }
    },
    mounted() {
      this.netGetList();
    },
  
    methods:{
      async netGetList() {
        var res = await ServiceApi.netYzServiceGetList({});
        let body = res['data']
        let {data} = body;
        this.openAdd = false;
        this.items = data;
      },

      nextHandle() {
        if(this.selectItem.id == undefined) {
          this.$message({
            message: '请选择产品',
            type: 'error',
            showClose: true,
            duration: 3000,
          });
          return;
        }
        let data = {
          data:this.selectItem,
          isAdd:true,
        }
        this.$router.push({name:'order02',params:data});
      },

      selectHandle(item) {
        this.selectItem =item;
      }
    },
  }
  </script>
  
  <style>
  .deleteBorder .el-tabs__nav-wrap::after{
      height: 0;
    }
  </style>
  